<template>
	
	<el-breadcrumb separator="/">
	  <el-breadcrumb-item :to="{ path: '/administrator/AdministerPicture' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>确认AQI数据列表</el-breadcrumb-item>
	</el-breadcrumb>
	<el-form
		 ref="ruleFormRef"
	    :model="ruleForm"
	    label-width="auto"
	    class="demo-ruleForm"
	    :size="formSize"
		style="max-width: 96%; display: flex; flex-wrap: wrap;">
		<el-form-item label="所在省" style="margin-right: 20px;">
		  <el-select
		    v-model="ruleForm.province"
		    placeholder="-全部-"
		    @change="handleProvinceChange"
			 style="width: 100px;" 
		  >
		    <el-option
		      v-for="province in provinces"
		      :key="province.value"
		      :label="province.label"
		      :value="province.value"
		    />
		  </el-select>
		</el-form-item>
		<el-form-item label="所在市" prop="city" style="margin-right: 20px;">
		  <el-select
		    v-model="ruleForm.city"
		    placeholder="-全部-"
		    :disabled="!cities.length"
			style="width: 100px;" 
		  >
		    <el-option
		      v-for="(city,index) in cities"
		      :key="city.value"
		      :label="city.label"
		      :value="index"
		    />
		  </el-select>
		</el-form-item>
		<el-form-item label="预估等级" style="margin-right: 20px;">
	  <el-select v-model="ruleForm.level" placeholder="选择等级" style="width: 100px;">
	    <el-option v-for="level in levels" :key="level" :label="level" :value="level"  ></el-option>
	  </el-select>
	</el-form-item>
	<el-form-item label="反馈日期" style="margin-right: 20px;">
	  <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期"></el-date-picker>
	</el-form-item>
	<el-form-item>
	  <el-button type="primary" @click="fetchData">查询</el-button>
	  <el-button type="danger" @click="resetQueryForm" style="margin-right: 20px;">清空</el-button>
	</el-form-item>
	</el-form>
	<el-table :data="tableData" style="width: 100%">
	  <el-table-column prop="id" label="编号" width="50"></el-table-column>
	  <el-table-column prop="province" label="所在省"></el-table-column>
	  <el-table-column prop="city" label="所在市"></el-table-column>
	  <el-table-column prop="level" label="AQI等级"></el-table-column>
	  <el-table-column prop="date" label="确认日期"></el-table-column>
	  <el-table-column prop="time" label="确认时间"></el-table-column>
	  <el-table-column prop="name" label="网格员"></el-table-column>
	  <el-table-column prop="name" label="反馈者"></el-table-column>
	  <el-table-column label="操作">
	    <template #default="scope">
	      <el-button size="mini" @click="handleAssign(scope.row)">指派</el-button>
	    </template>
	  </el-table-column>
	</el-table>
	<div class="pagination-container">
	<el-pagination
	  background
	  layout="total, prev, pager, next"
	  :total="total"
	  :page-size="pageSize"
	  :current-page="currentPage"
	  @current-change="handlePageChange">
	</el-pagination>
	</div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue';
	import axios from 'axios';
	import { useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';
	
	const provinces = ref([]);
	const cities = ref([]);
	const allCities = ref({});
	const levels = ['一', '二', '三', '四', '五', '六'];
	
	const tableData = ref([]);
	const total = ref(0);
	const pageSize = ref(10);
	const currentPage = ref(1);
	
	const router = useRouter();
	const formSize = ref('medium');
	const ruleForm = reactive({
	  province: '',
	  city: '',
	  level: '',
	  date: '',
	  assigned: ''
	});
	const loadProvinceCityData = async () => {
	  try {
	    const [provinceResponse, cityResponse] = await Promise.all([
	      axios.get('/province_object.json'),
	      axios.get('/city_object.json')
	    ]);
	
	    const provinceObject = provinceResponse.data;
	    const cityObject = cityResponse.data;
	    provinces.value = convertToProvinces(provinceObject);
	    allCities.value = convertToCities(cityObject);
	  } catch (error) {
	    console.error('加载省市数据失败:', error);
	  }
	};
	const convertToProvinces = (provinceObject) => {
	  return Object.keys(provinceObject).map((provinceId, index) => ({
	    value: index,
	    label: provinceObject[provinceId].name
	  }));
	};
	const convertToCities = (cityObject) => {
	  const cities = {};
	  Object.keys(cityObject).forEach((cityId,index) => {
	    const city = cityObject[cityId];
	    if (!cities[city.province]) {
	      cities[city.province] = [];
	    }
	    cities[city.province].push({
	      value: index,
	      label: city.name,
	    });
	  });
	  return cities;
	};
	const handleProvinceChange = (provinceIndex) => {
	  cities.value = allCities.value[provinces.value[provinceIndex].label] || [];
	};
	
	// 在组件挂载时加载数据
	onMounted(loadProvinceCityData);
	
	const fetchData = async () => {
	  // // Replace with your actual data fetching logic
	  // const response = await axios.get('/api/feedbacks', {
	  //   params: {
	  //     ...queryForm,
	  //     page: currentPage.value,
	  //     pageSize: pageSize.value
	  //   }
	  // });
	  // tableData.value = response.data.items;
	  // total.value = response.data.total;
	};
</script>

<style scoped>
	.demo-form-inline .el-form-item {
	  margin-right: 20px;
	}
	.el-breadcrumb {
	  margin-bottom: 20px; /* 增加面包屑下方的间距 */
	}
	.pagination-container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 50px; /* 或者你想要的高度 */
	}
</style>